import React, { Component } from 'react'
import { Row, Col } from 'antd'
import './index.less'
import utils from '../../utils/utils'
class Header extends Component {
  componentWillMount() {
    this.getDate()
  }
  state = {
    userName: 'yiki',
    date:''
  }
  getDate = () => {
    setInterval(() => {
      let time = new Date();
      time = time.getTime()
      let date = utils.formateDate(time)
      this.setState({
        date
      })
    }, 1000)
  }
  render() {
    return (
      <div className="header">
        <Row className="header-top">
          <Col span={24}>
            <span>欢迎,{this.state.userName}</span>
            <span className="logout">退出</span>
          </Col>
        </Row>
        <Row className="breadcrumb">
          <Col className="breadcrumb-title" span={4}>
            首页
          </Col>
          <Col className="weather" span={20}>
            <span className="date">{this.state.date}</span>
            <span className="weather-detail">晴转多云</span>
          </Col>
        </Row>
      </div>
    )
  }
}

export default Header
